<template>
  <div style="width: 551px;margin-top: 0px;margin-right: 25px;">
    <!-- 经营数据 -->
    <div class="p20 jysj">
      <div class="df aic jcsb">
        <div class="jysj-title">
          镇
        </div>
        <div class="jysj-title">
          行政村
        </div>
        <div class="jysj-title">
          村委会
        </div>
      </div>
      <div class="df aic jcsb jysj-value mt10">
        <div class="jysj-title">
          17
        </div>
        <div class="jysj-title">
          123
        </div>
        <div class="jysj-title">
          45
        </div>
      </div>
      <div class="jysj-tabel mt14">
        <div class="jysj-tabel-th df aic " v-for="item in 3">
          <div class="jysj-tabel-pie mr10">
            <div id="ysj-tabel-pie" class="ysj-tabel-pie"></div>
          </div>
          <div class="jysj-tabel-left ">30.0%</div>
          <div class="jysj-tabel-name ">第一产业</div>
          <div class="jysj-tabel-price ">
            29.45<span class="jysj-tabel-price-unit ml5">亿元</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 地域品牌 -->
    <div class="dypp p20">
      <div class="df aic jcsb mt40">
        <div class="df aic">
          <div class="dypp-label">销售类:</div>
          <div class="dypp-value ml15">20<span class="fs14 ml5">件</span></div>
        </div>
        <div class="df aic">
          <div class="dypp-label">加工类:</div>
          <div class="dypp-value ml15">20<span class="fs14 ml5">件</span></div>
        </div>
      </div>
      <div class="df aic jcsb mt15">
        <div class="df aic">
          <div class="dypp-label">种养殖类:</div>
          <div class="dypp-value ml15">
            2220<span class="fs14 ml5">件</span>
          </div>
        </div>
        <div class="df aic">
          <div class="dypp-label">其他类:</div>
          <div class="dypp-value ml15">
            2022<span class="fs14 ml5">件</span>
          </div>
        </div>
      </div>
      <div id="dypp"></div>
    </div>
    <!-- 三品一标 -->
    <div class="spyb df aic jcsb p20">
      <div class="spypbie" id="spypbie"></div>
      <div>
        <div class="df aic">
          <img src="@/assets/government/home/wugonghai.png" />
          <div class="spyb-label">A：无公害产品</div>
        </div>
        <div class="df aic mt23">
          <img src="@/assets/government/home/lvseshipin.png" />
          <div class="spyb-label" style="color: #1CC274;">B：绿色食品</div>
        </div>
        <div class="df aic mt23">
          <img src="@/assets/government/home/youjishipin.png" />
          <div class="spyb-label" style="color: #15DBF5;">C：有机食品</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.initCharts();
    this.initChartsBie();
    this.initChartsJysj();
  },
  methods: {
    initChartsJysj() {
      let myChart = this.$echarts.init(
        document.getElementById("ysj-tabel-pie")
      );
      myChart.setOption({
        legend: {
          show: false,
        },
        color: ["#1CC274", "#FEC87F"],
        series: [
          {
            name: "Access From",
            label: {
              show: false,
            },
            type: "pie",
            radius: "100%",
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
            ],
          },
        ],
      });
    },
    initChartsBie() {
      let myChart = this.$echarts.init(document.getElementById("spypbie"));
      myChart.setOption({
        legend: {
          show: false,
        },
        color: ["#E07037", "#1CC274", "#15DBF5"],
        series: [
          {
            type: "pie",
            radius: [40, 90],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 3,
            },
            labelLayout: {
              verticalAlign: "bottom",
              dy: -1,
            },
            labelLine: {
              length: 20,
              length2: 40,
            },
            label: {
              color: "white",
              normal: {
                padding: [0, -30],
                fontSize: 16,

                formatter: function(params) {
                  return params.value + "%";
                },
              },
            },
            data: [
              { value: 40, name: "A:无公害产品", label: { color: "#E07037" } },
              { value: 38, name: "B:绿色产品", label: { color: "#1CC274" } },
              { value: 32, name: "C:有机产品", label: { color: "#15DBF5" } },
            ],
          },
        ],
      });
    },
    initCharts() {
      let myChart = this.$echarts.init(document.getElementById("dypp"));
      myChart.setOption({
        color: ["#67F9D8", "#FFE434", "#56A3F1", "#FF917C"],
        legend: {
          show: false,
        },
        radar: [
          {
            indicator: [
              { text: "加工类" },
              { text: "种养殖类" },
              { text: "其他类" },
              { text: "销售类" },
            ],
            center: ["50%", "55%"],
            radius: 60,
            startAngle: 90,
            splitNumber: 3,
            shape: "circle",
            axisName: {
              color: "#15DBF5",
              fontWeight: "bold",
              fontSize: "22",
            },
          },
        ],
        series: [
          {
            type: "radar",
            emphasis: {
              lineStyle: {
                width: 4,
              },
            },
            data: [
              {
                value: [60, 5, 0.3, 1500],
                name: "Data B",
                areaStyle: {
                  color: "rgba(45, 255, 253, 0.6)",
                },
              },
            ],
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.jysj-tabel-th {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.jysj {
  width: 551px;
  padding-top: 40px;
  height: 310px;
  background-image: url(".././../../assets/government/home/8.png");
  padding: 64px 30px 13px 30px;
  .jysj-title {
    background-image: url(".././../../assets/government/home/9.png");

    font-size: 20px;
    color: #15dbf5;
    font-weight: bold;
    text-align: center;
    width: 146px;
    height: 38px;
    line-height: 38px;
  }
  .jysj-value {
    .jysj-title {
      color: #fec87f !important;
    }
  }
  .ysj-tabel-pie {
    width: 28px;
    height: 28px;
    margin-top: -4px;
  }
  .jysj-tabel-left {
    font-size: 20px;
    color: #fec87f;
    font-weight: bold;
    width: 100px;
    text-align: left;
  }
  .jysj-tabel-name {
    font-size: 16px;
    color: #15dbf5;
    font-weight: bold;
  }
  .jysj-tabel-price {
    font-size: 22px;
    color: #ffffff;
    font-weight: bold;
    margin-left: auto;
    padding-right: 14px;
    .jysj-tabel-price-unit {
      font-size: 14px;
    }
  }
}
.spyb {
  width: 551px;
  padding-top: 40px;
  height: 310px;
  background-image: url(".././../../assets/government/home/7.png");
  margin-top: 17px;
  .spypbie {
    width: 300px;
    height: 250px;
  }
  .spyb-label {
    font-size: 18px;
    font-weight: bold;
    color: #e07037;
    margin-left: 6px;
  }
}
.dypp {
  position: relative;
  margin-top: 17px;

  #dypp {
    width: 551px;
    height: 250px;
    position: absolute;
    top: 60px;
  }
  width: 551px;
  height: 310px;
  background-image: url(".././../../assets/government/home/6.png");
  .dypp-label {
    font-size: 16px;
    color: #15dbf5;
    font-weight: bold;
    width: 75px;
    text-align: right;
  }
  .dypp-value {
    font-size: 25px;
    color: #fec87f;
    font-weight: bold;
  }
}
</style>
